<template>
    <div class="personal-root">
        <div class="top">
            <div class="title">个人信息</div>
            <div class="line"></div>
        </div>
        <div class="content">
            <form>
                <div class="head">
                    <label><span>*</span>头像:</label>
                    <img :src="base.icon">
                    <a @click="slectIcon()">选择头像</a>
                </div>
                <div class="name">
                    <label><span>*</span>姓名:</label>
                    <input type="text" name="userName" v-model="base.name"></input>
                </div>
                <div class="sex">
                    <label><span>*</span>性别:</label>
                    <!--                        <el-radio v-model="base.sex" label="0"  >男</el-radio>-->
                    <!--                        <el-radio v-model="base.sex" label="1"  >女</el-radio>-->
                    <input type="radio" name="sex" @click="asySex" :checked="base.sex==0?'man':''" value="0"> 男
                    <input type="radio" name="sex" @click="asySex" :checked="base.sex==1?'woman':''" value="1"> 女
                </div>
                <div class="phone">
                    <label><span>*</span>手机:</label>
                    <input type="phone" name="phone" v-model="base.phone" disabled></input>
                    <a @click="toChangePhone">更换</a>
                </div>
                <div class="email">
                    <label><span>*</span>邮箱:</label>
                    <input :disabled="haveEmail" type="text" name="email" v-model="base.email"></input>
                    <a @click="toBindEmail()">{{base.bindQ?'更换':'绑定'}}</a>
                </div>
                <div class="duty">
                    <label>担任职务:</label>
                    <input type="text" name="positions" placeholder="请输入您所担任的职位" v-model="base.duty"></input>
                </div>
                <div class="cell">
                    <label>办公电话:</label>
                    <input type="text" placeholder="请输入办公电话" v-model="base.cell" maxlength="13"></input>
                </div>
                <div class="qq">
                    <label>QQ:</label>
                    <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')"
                           onblur="value=value.replace(/[^\d]/g,'')"
                           name="qq" placeholder="请输入QQ号码" v-model="base.qq"></input>
                </div>
                <div class="sub">
                    <label></label>
                    <div class="submit" @click="save">下一步</div>
                </div>
            </form>
        </div>
        <SelectIcon ref="myselect" @select="selectHeadIcon"></SelectIcon>
        <!--未完善信息的提示框-->
        <el-dialog class="improve_dialog" :visible.sync="showImproveQ" title="提示">
            <ImproveInfo :which="'企业信息'" @not-now="showImproveQ=false" @edit-now="editNow"></ImproveInfo>
        </el-dialog>
    </div>
</template>

<script>
  import SelectIcon from '@/components/selectIcon.vue'
  import _g from '../../assets/utils/global'
  import ImproveInfo from '../../views/setting/ImproveInfo'
  import _subject from '../../assets/utils/subject'

  export default {
    name: 'personalInfo',
    computed:{
      haveEmail(){
        return _subject.getEmail()
      }
    },
    data: function() {
      return {
        showImproveQ: false,
        headUrl: '/assets/1.png',
        heads: [require('@/assets/img/setting/h1.png'), require('@/assets/img/setting/h2.png'),
          require('@/assets/img/setting/h3.png'), require('@/assets/img/setting/h4.png'),
          require('@/assets/img/setting/h5.png'), require('@/assets/img/setting/h6.png'), require('@/assets/img/setting/h7.png'),
          require('@/assets/img/setting/h8.png'), require('@/assets/img/setting/h9.png'), require('@/assets/img/setting/h10.png')],
        base: {
          name: '',
          sex: '1',
          phone: '',
          email: '',
          bindQ: false,
          duty: '',
          cell: '',
          qq: '',
          icon: require('@/assets/img/setting/h1.png')
        }
      }
    }, methods: {
      editNow() {
        this.showImproveQ = false
        _subject.setting.next(1)
        this.$router.push({ path: '/setting/company' })
      },
      selectHeadIcon(index) {
        this.base.icon = this.heads[index]
        this.flushState = false
      },
      toChangePhone() {
        this.$router.push({ path: '/setting/binding' })
      },
      asySex(e) {
        this.base.sex = e.target.value
        // console.log(e.target.value)
      },
      save() {
        let that = this
        console.log('person head', this.base)
        if (this.base.name && this.base.phone && _subject.getEmail()) {
          _g.apiPost('/company/saveComOrPerInfo.do', {
            contactName: that.base.name,
            sex: that.base.sex,
            phone: that.base.phone,
            positions: that.base.duty,
            officePhone: that.base.cell,
            qq: that.base.qq,
            headImage: that.base.icon
          }).then(res => {
            if (res.status === 0) {
              localStorage.setItem(localSaved.userInfo, JSON.stringify(res.data))
              console.log(localStorage.getItem(localSaved.userInfo))
              _subject.setting.next(1)
              _subject.page.next(-1)
              this.$router.push({ path: '/setting/company' })
            }
          })
        } else {
          if (!_subject.getEmail()) {
            _g.message('请绑定邮箱', 'warning')
            return
          }
          _g.message('请填写完必填参数', 'warning')
        }
      },
      slectIcon: function() {
        this.$refs.myselect.openDialog()
      },
      toBindEmail: function() {
        this.$router.push({ path: '/setting/bindemail', query: { email: this.base.email } })
      }
    }, created() {
      console.log('person', localStorage.getItem(localSaved.userInfo))
      if (localStorage.getItem(localSaved.userInfo) != null) {
        var uInfo = JSON.parse(localStorage.getItem(localSaved.userInfo))
        this.base.name = uInfo.company.contactName
        this.base.sex = uInfo.company.sex
        this.base.phone = uInfo.company.phone
        this.base.email = uInfo.company.email
        this.base.bindQ = !!uInfo.company.email
        this.base.duty = uInfo.company.positions
        this.base.cell = uInfo.company.officePhone
        this.base.qq = uInfo.company.qq
        this.base.icon = uInfo.company.headImage == null ? require('@/assets/img/setting/h1.png') : this.$sub.getCompanyIcon()
      }
    },
    components: { SelectIcon, ImproveInfo }
  }
</script>

<style scoped>
    .personal-root {
        position: relative;
        width: 980px;
        height: 847px;
        background: #FFFFFF;
    }

    .personal-root .top {
        height: 50px;
        min-width: 980px;
        border: 2px solid white;
        background: rgba(251, 251, 255, 1);
    }

    .personal-root .top .title {
        margin-top: 8px;
        margin-left: 45px;
        margin-bottom: 4px;
        width: 77px;
        height: 26px;
        font-size: 19px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 26px;
    }

    .personal-root .top .line {
        width: 50px;
        height: 3px;
        margin-left: 64px;
        background: rgba(255, 115, 0, 1);
    }

    .personal-root .content {
        position: absolute;
        top: 53px;
        left: 0px;
    }

    .personal-root .content div {
        margin-left: 120px;
        margin-top: 20px;
    }

    .personal-root .content div input {
        padding-left: 10px;
    }

    .personal-root .content div input:focus {
        border: 1px solid #ff7300;
    }

    .personal-root .content input::-webkit-input-placeholder {
        color: rgba(204, 204, 204, 1);
    }

    .personal-root .content div input:nth-of-type(2) {
        margin-left: 18px;
    }

    .personal-root .content .head {
        margin-top: 85px;
        display: flex;
        align-items: center;
    }

    .personal-root .content .name {
        margin-top: 49px;
    }

    .personal-root .content .sex {
        margin-top: 26px;
    }

    .personal-root .content label {
        display: inline-block;
        width: 90px;
        text-align: right;
        font-size: 14px;
        /*border: 2px solid red;*/
        font-weight: 500;
        margin-right: 16px;
        /*border: 2px solid green;*/
    }

    .personal-root .content .sex .el-radio {
        display: inline-block;
        width: 20px;
        height: 20px;
        /*position: relative;*/
        margin-right: 30px;
        /*border: 1px solid rgba(204, 204, 204, 1);*/
    }

    .personal-root .content .sex span.el-radio__inner {
        width: 28px;
        height: 28px;
    }

    .personal-root .content input[type=text], .root .content input[type=email] {
        width: 252px;
        height: 32px;
        background: rgba(251, 251, 255, 1);
        border-radius: 3px;
        border: 1px solid rgba(204, 204, 204, 1);
    }

    .personal-root .content .phone {
        margin-top: 20px;
        /*border: 2px solid red;*/
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
    }

    .personal-root .content .phone > input {
        padding-top: 0px;
        width: 110px;
        border: none;
        background: white;
    }

    .personal-root .content label span {
        color: rgba(255, 115, 0, 1);
    }

    .personal-root .content .head img {
        width: 89px;
        height: 89px;
        border-radius: 50%;
    }

    .personal-root .content a {
        color: #4B8BF9;
        margin-left: 15px;
    }

    .personal-root .content .submit {
        width: 125px;
        height: 40px;
        background: linear-gradient(56deg, rgba(255, 115, 0, 1) 0%, rgba(255, 177, 38, 1) 100%);
        box-shadow: 0px 3px 10px 0px rgba(248, 157, 82, 0.71);
        border-radius: 4px;
        text-align: center;
        line-height: 40px;
        margin-left: 104px;
        font-size: 18px;
        border: none;
        font-weight: 500;
        margin-top: 22px;
        color: white;
    }
</style>